<template>
  <div class="menu">
    <ul>
      <li v-for="item of Menu">
        <router-link :to="'/common/mallpage/'+item.id">
          <i>
            <img :src="item.imgUrl">
          </i>
          <span>
            <h3>{{item.title}}</h3><em>{{item.desc}}</em>？
          </span>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'HomeMenu',
    data() {
      return {
        "Menu": [
          {
            "id": "0001",
            "imgUrl": "http://m.mylikesz.com/newm/i2/images/xm1.png",
            "title": "隆鼻",
            "desc": "¥2680",
            "children": [{
              "jianjie": "小米8 屏幕指纹版",
              "jiesao": "全新升级小米9十大功能 / 骁龙845处理器 / 全球首款压感屏幕指纹 / 四曲面渐变镜面机身 / 960帧超慢动作 / 手持超级夜景",
              "gallaryImgs": ["http://m.mylikesz.com/newm/i2/images/xm1.png",
                "http://m.mylikesz.com/newm/i2/images/xm1.png"
              ]
            }]
          }, {
            "id": "0002",
            "imgUrl": "http://m.mylikesz.com/newm/i2/images/xm2.png",
            "title": "隆胸",
            "desc": "¥12680",
            "MUrl": "",
            "children": [{
              "jianjie": "小米8 屏幕指纹版",
              "jiesao": "全新升级小米9十大功能 / 骁龙845处理器 / 全球首款压感屏幕指纹 / 四曲面渐变镜面机身 / 960帧超慢动作 / 手持超级夜景",
              "gallaryImgs": ["http://m.mylikesz.com/newm/i2/images/xm2.png",
                "http://m.mylikesz.com/newm/i2/images/xm2.png"
              ]
            }]
          }
        ]
      }

    }

  }
</script>

<style>
  .menu {
    width: 95%;

    padding: 0.1rem 0;
    background-color: #fff;
    border-radius: 0.1rem 0.1rem 0 0;
  }

  .menu ul {
    display: flex;
    flex-wrap: wrap;
    font-size: 0;
  }

  .menu ul li {
    width: 20%;
    text-align: center;
    font-size: 0.16rem;
    text-align: center;
    padding: 0.1rem 0;
    flex: auto;
  }

  .menu ul li i {
    display: inline-block;
    width: 0.63rem;
    font-style: normal;
    font-size: 0.16rem;
  }

  .menu ul li i img {
    width: 70%;
  }

  .menu ul li span {
    line-height: 0.3rem;
    font-size: 0.16rem;
  }

  .menu ul li span h3 {
    color: #6f6f6f;
  }

  .menu ul li span em {
    color: #ff0155;
    font-style: normal !important;
  }
</style>
